<example name="Sizes of inputs">
  <file type="html" disable-auto-size>
    <div ng-app="Example.input-size" ng-strict-di ng-controller="ExampleCtrl as exampleCtrl">
      <h3 class="example-block">Query Assists</h3>
      <div class="example-block">
        <div class="ring-error-bubble-wrapper">
          <div react="QueryAssist"
            class="ring-input-size_xs"
            x-data-source="exampleCtrl.dataSource()"
            glass="true"
            placeholder="'Extra-short'">
          </div>
          <div class="ring-error-bubble active">Extra-short Query Assist</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <div react="QueryAssist"
            class="ring-input-size_s"
            x-data-source="exampleCtrl.dataSource()"
            glass="true"
            placeholder="'Short'">
          </div>
          <div class="ring-error-bubble active">Short Query Assist</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <div react="QueryAssist"
            class="ring-input-size_md"
            x-data-source="exampleCtrl.dataSource()"
            glass="true"
            placeholder="'Medium'">
          </div>
          <div class="ring-error-bubble active">Medium Query Assist</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <div react="QueryAssist"
            class="ring-input-size_l"
            x-data-source="exampleCtrl.dataSource()"
            glass="true"
            placeholder="'Long'">
          </div>
          <div class="ring-error-bubble active">Long Query Assist</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <div react="QueryAssist"
            x-data-source="exampleCtrl.dataSource()"
            glass="true"
            placeholder="'Full-width'">
          </div>
          <div class="ring-error-bubble active">Full-width Query Assist</div>
        </div>
      </div>

      <h3 class="example-block">Rg Selects: Buttons</h3>
      <div class="example-block">
        <div class="ring-error-bubble-wrapper">
          <rg-select class="ring-input-size_xs"
            ng-model="exampleCtrl.selected"
            options="item in exampleCtrl.options"
            label="Select item"></rg-select>
          <div class="ring-error-bubble active">Extra-short Select</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <rg-select class="ring-input-size_s"
            ng-model="exampleCtrl.selected"
            options="item in exampleCtrl.options"
            label="Select item"></rg-select>
          <div class="ring-error-bubble active">Short Select</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <rg-select class="ring-input-size_md"
            ng-model="exampleCtrl.selected"
            options="item in exampleCtrl.options"
            label="Select item"></rg-select>
          <div class="ring-error-bubble active">Medium Select</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <rg-select class="ring-input-size_l"
            ng-model="exampleCtrl.selected"
            options="item in exampleCtrl.options"
            label="Select item"></rg-select>
          <div class="ring-error-bubble active">Long Select</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <rg-select ng-model="exampleCtrl.selected"
            options="item in exampleCtrl.options"
            label="Select item"></rg-select>
          <div class="ring-error-bubble active">Full-width Select</div>
        </div>
      </div>

      <h3 class="example-block">Rg Selects: Inputs</h3>
      <div class="example-block">
        <div class="ring-error-bubble-wrapper">
          <rg-select class="ring-input-size_xs"
            type="input"
            ng-model="exampleCtrl.selected"
            options="item in exampleCtrl.options"
            label="Select item"></rg-select>
          <div class="ring-error-bubble active">Extra-short Select</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <rg-select class="ring-input-size_s"
            type="input"
            ng-model="exampleCtrl.selected"
            options="item in exampleCtrl.options"
            label="Select item"></rg-select>
          <div class="ring-error-bubble active">Short Select</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <rg-select class="ring-input-size_md"
            type="input"
            ng-model="exampleCtrl.selected"
            options="item in exampleCtrl.options"
            label="Select item"></rg-select>
          <div class="ring-error-bubble active">Medium Select</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <rg-select class="ring-input-size_l"
            type="input"
            ng-model="exampleCtrl.selected"
            options="item in exampleCtrl.options"
            label="Select item"></rg-select>
          <div class="ring-error-bubble active">Long Select</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <rg-select ng-model="exampleCtrl.selected"
            type="input"
            options="item in exampleCtrl.options"
            label="Select item"></rg-select>
          <div class="ring-error-bubble active">Full-width Select</div>
        </div>
      </div>

      <h3 class="example-block">Inputs</h3>
      <div class="example-block">
        <div class="ring-error-bubble-wrapper">
          <input type="number" class="ring-input ring-input-size_xs">
          <div class="ring-error-bubble active">Extra-short Input</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <input type="number" class="ring-input ring-input-size_s">
          <div class="ring-error-bubble active">Short Input</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <input type="number" class="ring-input ring-input-size_md">
          <div class="ring-error-bubble active">Medium Input</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <input type="number" class="ring-input ring-input-size_l">
          <div class="ring-error-bubble active">Long Input</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <input type="number" class="ring-input">
          <div class="ring-error-bubble active">Full-width Input</div>
        </div>
      </div>

      <h3 class="example-block">Textareas</h3>
      <div class="example-block">
        <div class="ring-error-bubble-wrapper">
          <textarea class="ring-input ring-input-size_xs"></textarea>
          <div class="ring-error-bubble active">Extra-short Textarea</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <textarea class="ring-input ring-input-size_s"></textarea>
          <div class="ring-error-bubble active">Short Textarea</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <textarea class="ring-input ring-input-size_md"></textarea>
          <div class="ring-error-bubble active">Medium Textarea</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <textarea class="ring-input ring-input-size_l"></textarea>
          <div class="ring-error-bubble active">Long Textarea</div>
        </div>
        <div class="ring-error-bubble-wrapper">
          <textarea class="ring-input"></textarea>
          <div class="ring-error-bubble active">Full-width Textarea</div>
        </div>
      </div>

    </div>
  </file>
  <file type="css">
    :global(.example-block) {
      margin: 16px;
      max-width: 600px;
    }
  </file>
  <file type="js">
    import angular from 'angular';
    import '@jetbrains/ring-ui/components/select-ng/select-ng';
    import registerComponents from '@jetbrains/ring-ui/components/react-ng/react-ng';
    import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';

    registerComponents({QueryAssist});

    angular.module('Example.input-size', [
      'Ring.react-ng',
      'Ring.select'
    ]).controller('ExampleCtrl', [
      function () {
        var exampleCtrl = this;
        exampleCtrl.dataSource = function () {
          return [];
        };

        exampleCtrl.options = ['one', 'two', 'three'];
        exampleCtrl.selected = null;
      }
    ]);
  </file>
</example>
